萝三画室

商品房网签平台-总结Part2(CSS3)

发表于

本篇是商品房网签平台总结系列的Part2-CSS，内容包括box-sizing、媒体查询。
全部项目请戳->>>>> https://github.com/honey3go/realEstate

box-sizing

之前在仿网易云音乐PC的时候，就发现了box-sizing这个属性，但是没有深入研究。后来在element ui中发现了这个属性的大量使用，然后又去看了bootstrap发现也是如此，这回彻底引起了我的注意。这个不起眼的属性，会让你的布局思路更清晰，在自适应或响应式布局中用处灰常大。

box-sizing是CSS3新增的属性，它可以重新定义盒模型。我们知道，在默认的盒模型中，元素的width和height是指内容区的宽高，不包括padding、border和margin，元素实际宽度=width+左右padding+左右border+左右margin，高度同理。然而通过设置box-sizing:border-box，我们可以将width设置为border以内的全部宽度，此时元素的实际宽度=width+左右margin。

语法

box-sizing: content-box | border-box | inherit;

栗子

我们将html和body元素的宽高调整为浏览器窗口的宽高，然后新建一个div元素，赋值padding 50px,100%的宽和50%的高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Examples</title>
<style type="text/css">
	html, body{
		height: 100%;
		margin: 0;
	}
	.inner{
		padding: 50px;
		width: 100%;
		height: 50%;
		background: #13CE66;	
	}
</style>
</head>
<body>
    <div class="inner"></div>
</body>
</html>

效果：
part2_1.png
我们看到，body的width*height是900x600.8，div是900x300.4。注意横向已经出现滚动条。

然后我们使用box-sizing属性，将其设置为border-box，然后我们发现：
part2_2.png
div的width*height变为800x200。注意此次并没有滚动条，div的width+padding刚好等于body元素的width。

应用

box-sizing可以用来做什么呢？
box-sizing提供了一种优雅的方式在自适应布局和响应式布局。

自适应高度

对于传统的方法，实现一个padding固定、width自适应、实际宽度等于父元素width的div很容易：

1
2
3
div{
	padding: 0 10px;
}

然而应用在高度上却并不简单，原因是高度不会自动填满父元素，并且纵向的margin、border、padding，当以百分比定义时，它相对的是父元素的width而不是height。
常用的解决办法：

1
2
3
4
5
6
7
8
9
10
.parent{
	position:relative;
    height:100px;
}
.child{
	position: absolute;
    top:0;
    bottom:0;
    padding: 0 10px;
}

这种方法的原理是利用绝对定位，强行将子元素的顶部和底部与父元素对齐。
下面让我们看看利用box-sizing的解决方式:

1
2
3
4
5
6
7
8
.parent{
	height:100px;
}
.child{
    box-sizing:border-box;
    height:100%;
    padding: 10px 0;
}

是不是优雅多了？并且不需要使用绝对定位产生脱离文档流的元素。

在bootstrap和element ui中的应用

bootstrap和element ui都是栅格式布局系统，他们的实现思路也是一致的：
将整个页面中的一行横向等分为12个格子（element ui是24个），元素的宽度是相对于格子计算的。比如一行中并排包含两个元素，他们的宽度比是1：3，那么在bootstrap中，他们的宽度就是一个占3个格子的宽度，一个占9个格子的宽度。

除了栅格布局系统，其他很多元素也用到了box-sizing这个属性。

我猜想利用box-sizing的原因是：

  1. 元素的实际宽度只与页面宽度有关，用户手动改变元素padding或border时，不会影响到元素的实际宽度，这样使得布局表现更稳定。
  2. IE6以前的默认盒子模型就是padding+border+width，可能是考虑到了兼容问题。

媒体查询@media

媒体查询可以针对不同的媒体类型、不同的屏幕尺寸设置定义不同的样式。我理解的媒体查询就像一个针对CSS样式的if语句，当条件满足XXXX时，应用PPPP样式。
媒体查询主要应用于响应式布局中，对不同屏幕大小应用不同的样式。它也可以应用在其他场景上，比如打印页面。

语法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

应用

本次的项目有打印页面的需求，也要求做移动端APP，因此我们在这两个方向上用了媒体查询。

打印页面

打印页面通常是打印页面的一部分而非全体，因此我们需要在打印时，显示需要打印的元素，隐藏不需要打印的元素。

1
2
3
4
5
6
7
8
//CSS，媒体查询，打印
@media print { 
  .noprint { display: none; }
} 
//JS,点击按钮打印
prt.onclick = function() {
	window.print();
}

打印时需要隐藏的元素加上一个css类noprint，点击打印按钮时，这些元素就会应用noprint的样式，隐藏显示。

响应式页面

无论是PC端不同尺寸的浏览器窗口，还是移动端不同页面尺寸的屏幕，通过媒体查询都可以检测到。

1
2
3
4
5
@media screen and (max-width: 375px) {//媒体查询，宽375以下的手机
  .left-warp{
    width: 64px;
  }
}

这条媒体查询的含义是：对于屏幕宽度在375px以下的手机，具有left-wrap类的元素，其宽度是64px。